<template>
  <div
    v-loading="loading"
    class="iframeWrapper"
    element-loading-text="拼命加载中..."
    :style="{ height: codeIframeBox.height }"
  >
    <iframe
      :src="srcUrl"
      frameborder="0"
      width="100%"
      :height="codeIframeBox.height"
      id="ifra"
      :class="[
        backMainBoxStyle === ''
          ? 'exit-full-screen-transition'
          : 'enter-full-screen-transition',
      ]"
    >
    </iframe>
    <div ref="crudBoxBtn" class="crud-box-btn">
      <el-button
        type="default"
        size="mini"
        @click="changeLayout"
        :class="[
          backMainBoxStyle === '' ? 'open-full-screen' : 'close-full-screen',
        ]"
      >
        <i
          :class="[
            backMainBoxStyle === ''
              ? 'el-icon-full-screen'
              : 'el-icon-switch-button',
          ]"
          style="margin-left: -8px"
        ></i>
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

let innerHeight = window.innerHeight;
const globalNavbarHeight = 50;

@Component({})
export default class extends Vue {
  srcUrl: string;
  loading: boolean;
  codeIframeBox: any;
  backMainBoxStyle: string;
  constructor() {
    super();
    this.srcUrl = "";
    this.loading = true;
    this.codeIframeBox = {
      height: `${innerHeight - globalNavbarHeight}px`,
    };
    this.backMainBoxStyle = "";
  }
  mounted() {
    // this.srcUrl = process.env.VUE_APP_BUILDFORM; // 依托 腾讯云 cloudStudio 转发至本地的BuildForm nginx容器
    this.srcUrl = 'https://lfdgxo-gzxbzc-8085.preview.myide.io';
    this.initIframe();
    // window.addEventListener("resize", () => {
    //   innerHeight = window.innerHeight;
    // });
  }
  initIframe() {
    const iframe: any = document.querySelector("#ifra");
    // 处理兼容行问题
    if (iframe.attachEvent) {
      iframe.attachEvent("onload", () => {
        console.log("IE:");
        // iframe加载完毕以后执行操作
        this.loading = false;
      });
    } else {
      iframe.onload = () => {
        // iframe加载完毕以后执行操作
        this.loading = false;
        // const ifameWin = iframe.contentWindow;
        // ifameWin.postMessage({ name: "xmk" }, "*");
      };
    }
    // window.addEventListener("message", (e) => {
    //   //event.data获取传过来的数据
    //   console.log("childMessage:", e.data);
    // });
  }
  changeLayout() {
    const mainContainer: any = document.querySelector(".main-container");
    const navbar: any = document.querySelector(".navbar");
    // console.log("sider", this.$parent);
    // const mainBox: any = this.$parent["$el"];
    if (this.backMainBoxStyle === "") {
      // 进入全屏
      this.codeIframeBox.height = `${innerHeight}px`;
      this.backMainBoxStyle = "z-index: 1200; margin-left: 0;";
      mainContainer.style.cssText = this.backMainBoxStyle;
      // 隐藏导航条
      navbar.style.cssText = "display: none";
    } else {
      // 退出全屏, 复原
      this.backMainBoxStyle = "";
      this.codeIframeBox.height = `${innerHeight - globalNavbarHeight}px`; // 减去导航条的高度
      mainContainer.style.cssText = `z-index: 500;`;
      // 显示导航条
      navbar.style.cssText = "";
    }
  }
}
</script>
<style lang="scss">
.iframeWrapper {
  width: 100%;
  background-color: #fff;
  position: relative;
  top: 0;
  left: 0;
  >>> .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.7);
  }
  // coddeIframeBox
  #ifra {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
  // 进入全屏的动画
  .enter-full-screen-transition {
    animation: enterFullScreen 0.6s linear;
  }
  @keyframes enterFullScreen {
    0% {
      transform: scale(0.05);
    }
    25% {
      transform: scale(0.25);
    }
    50% {
      transform: scale(0.5);
    }
    80% {
      transform: scale(0.85);
    }
    100% {
      transform: scale(1);
    }
  }
  // 退出全屏的动画
  .exit-full-screen-transition {
    animation: exitFullScreen 0.25s linear;
  }
  @keyframes exitFullScreen {
    0% {
      transform: scale(1.6);
    }
    25% {
      transform: scale(1.45);
    }
    50% {
      transform: scale(1.3);
    }
    80% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  .crud-box-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    min-height: 10px;
    padding: 3px;
    .el-button--mini {
      color: #fff;
      font-size: 16px;
      background: linear-gradient(to right, #6a82fb, #fc5c7d);
      // background-image: linear-gradient(120deg, #ec008c, #fc6767);
      width: 30px;
      height: 30px;
      border-radius: 0 4px 4px 0;
      &:hover::after {
        position: absolute;
        top: -15px;
        left: 3px;
        color: #000;
        font-size: 12px;
      }
    }
  }
  .open-full-screen:hover::after {
    content: "进入禅模式?";
  }
  .close-full-screen:hover::after {
    content: "退出禅模式?";
  }
}
</style>